Form Controls

Example

Email address

Example textarea

<div class="mb-20">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" />
</div>
<div class="mb-20">
    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

Disabled

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

Readonly plain text

Password

<div class="mb-20 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com" />
    </div>
</div>
<div class="mb-20 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" />
    </div>
</div>

Sass

Variables

You can found every SASS Variable on scss/vendors/bootstrap/forms/_form-control.scss

$form-input-font-size: $font-size-base;
$form-input-font-weight: $font-weight-normal;
$form-input-font-background: #FBFBFB;
$form-input-font-background__focus: $form-input-font-background;
$form-input-font-color: $dark;
$form-input-font-color__placeholder: #D1D1D1;
$form-input-font-padding-y: 15px;
$form-input-font-padding-x: 30px;
$form-input-font-border-width: 1px;
$form-input-font-border-color: #C2C2C2;
$form-input-font-border-color__focus: $primary;
$form-input-font-border-radius: 20px;

// # Input Icon
$form-input-icon-color: $primary;
$form-input-icon-size: 18px;

$form-input-icon-calendar: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17 3H16V1C16 0.734784 15.8946 0.48043 15.7071 0.292893C15.5196 0.105357 15.2652 0 15 0C14.7348 0 14.4804 0.105357 14.2929 0.292893C14.1054 0.48043 14 0.734784 14 1V3H6V1C6 0.734784 5.89464 0.48043 5.70711 0.292893C5.51957 0.105357 5.26522 0 5 0C4.73478 0 4.48043 0.105357 4.29289 0.292893C4.10536 0.48043 4 0.734784 4 1V3H3C2.20435 3 1.44129 3.31607 0.87868 3.87868C0.316071 4.44129 0 5.20435 0 6V7H20V6C20 5.20435 19.6839 4.44129 19.1213 3.87868C18.5587 3.31607 17.7956 3 17 3Z' fill='#{$form-input-icon-color}'/><path d='M0 17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V9H0V17Z' fill='#{$form-input-icon-color}'/></svg>");